<template>
  <div v-watermark="userName" class="container">
    <div class="tips">选择您要进行的业务</div>
    <div class="card-menu">
      <el-row>
        <el-col :span="6">
          <div class="card-menu-item" @click="openPage('info')">
            <el-card v-waves class="box-card box-card-info">
              <div class="logo">
                <img alt="" src="@/assets/icons/cardSearch.svg">
              </div>
              <div class="title">卡信息查询</div>
            </el-card>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="card-menu-item" @click="openPage('recharge')">
            <el-card v-waves class="box-card box-card-success">
              <div class="logo">
                <img alt="" src="@/assets/icons/cardRecharge.svg">
              </div>
              <div class="title">卡充值</div>
            </el-card>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="card-menu-item" @click="openPage('master')">
            <el-card v-waves class="box-card">
              <div class="logo">
                <img alt="" src="@/assets/icons/cardNew.svg">
              </div>
              <div class="title">办理主卡</div>
            </el-card>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="card-menu-item" @click="openPage('second')">
            <el-card v-waves class="box-card">
              <div class="logo">
                <img alt="" src="@/assets/icons/cardSecond.svg">
              </div>
              <div class="title">办理副卡</div>
            </el-card>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="card-menu-item" @click="openPage('lock')">
            <el-card v-waves class="box-card box-card-danger">
              <div class="logo">
                <img alt="" src="@/assets/icons/cardLock.svg">
              </div>
              <div class="title">卡修改</div>
            </el-card>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="card-menu-item" @click="openPage('init')">
            <el-card v-waves class="box-card box-card-danger">
              <div class="logo">
                <img alt="" src="@/assets/icons/cardLock.svg">
              </div>
              <div class="title">卡初始化</div>
            </el-card>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
import {mapGetters} from 'vuex'

export default {
  name: 'CardMenuPanel',
  computed: {
    ...mapGetters(['stationName', 'userName'])
  },
  mounted () {
  },
  methods: {
    // 打开新页面
    openPage (name) {
      console.log('openPage')
      console.log(name)
      this.$router.push('/card/' + name)
    },
    // 敬请期待
    waitForMe () {
      this.$message.success('敬请期待...')
    }
  }
}
</script>

<style scoped>
.container {
  background-color: white;
}

.tips {
  padding-top: 5%;
  text-align: center;
  font-size: 2rem;
  font-weight: bold;
  color: #666;
}

.box-card {
  background-color: #409EFF;
  border-radius: 8px;
}

.box-card-success {
  background-color: seagreen;
}

.box-card-info {
  background-color: #909399;
}

.box-card-warning {
  background-color: #E6A23C;
}

.box-card-danger {
  background-color: #F56C6C;
}

.card-menu {
  width: 80%;
  margin-left: 10%;
  padding-top: 2%;
}

.card-menu-item {
  margin: 0 auto;
  width: 200px;
  text-align: center;
  margin-bottom: 10%;
}

.card-menu-item .logo {
  width: 100%;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

.card-menu-item .logo img {
  height: 70px;
  width: auto;
}

.card-menu-item .title {
  font-size: 1.7rem;
  line-height: 40px;
  color: white;
}
</style>